<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <!--table区 -->
    <div class="marginCss">
      <a-table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :rowClassName="setdataCss"
        :loading="loading"
        :scroll="{y: 700}"
        :pagination="false"
      >
        <span slot="dataVersionTitle1">
          <a-icon type="smile-o" />
          版本:{{ dataVersion1Num }}
        </span>
        <span slot="dataVersionTitle2">
          <a-icon type="smile-o" />
          版本:{{ dataVersion2Num }}
        </span>
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <img :src="getAvatarView(record)" />
          </div>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
import {getAction} from '@/api/manage';

export default {
  name: 'DataLogCompareModal',
  data() {
    return {
      modalWidth: 1000,
      modaltoggleFlag: true,
      confirmDirty: false,
      title: '操作',
      visible: false,
      model: {},
      confirmLoading: false,
      headers: {},
      //版本号
      dataVersion1Num: '',
      dataVersion2Num: '',
      //表头
      columns: [
        {
          title: '字段名',
          align: 'left',
          dataIndex: 'code',
          width: '30%',
        },
        {
          align: 'left',
          dataIndex: 'dataVersion1',
          width: '30%',
          slots: {title: 'dataVersionTitle1'},
        },
        {
          title: '',
          dataIndex: 'imgshow',
          align: 'center',
          scopedSlots: {customRender: 'avatarslot'},
          width: '10%',
        },
        {
          align: 'left',
          dataIndex: 'dataVersion2',
          width: '30%',
          slots: {title: 'dataVersionTitle2'},
        },
      ],
      //数据集
      dataSource: [],
      loading: false,
      url: {
        queryCompareUrl: '/sys/dataLog/queryCompareList',
      },
    };
  },
  created() {},
  methods: {
    loadData(dataId1, dataId2) {
      this.dataSource = [];
      let that = this;
      getAction(that.url.queryCompareUrl, {
        dataId1: dataId1,
        dataId2: dataId2,
      }).then((res) => {
        if (res.success) {
          that.dataVersion1Num = res.result[0].dataVersion;
          that.dataVersion2Num = res.result[1].dataVersion;
          let json1 = JSON.parse(res.result[0].dataContent);
          let json2 = JSON.parse(res.result[1].dataContent);
          for (var item1 in json1) {
            for (var item2 in json2) {
              if (item1 == item2) {
                this.dataSource.push({
                  code: item1,
                  imgshow: '',
                  dataVersion1: json1[item1],
                  dataVersion2: json2[item2],
                });
              }
            }
          }
        } else {
          console.log(res.message);
        }
      });
    },
    compareModal(dataId1, dataId2) {
      this.visible = true;
      this.loadData(dataId1, dataId2);
    },
    handleCancel() {
      this.close();
    },
    modalFormOk() {},
    close() {
      this.$emit('close');
      this.visible = false;
      this.disableSubmit = false;
    },
    setdataCss(record) {
      let className = 'trcolor';
      const dataVersion1 = record.dataVersion1;
      const dataVersion2 = record.dataVersion2;
      if (dataVersion1 != dataVersion2) {
        return className;
      }
    },
    getAvatarView: function (avatar) {
      if (avatar.dataVersion1 != avatar.dataVersion2) {
        return '/goright.png';
      } else {
        return '';
      }
    },
  },
};
</script>

<style scoped>
.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap > img {
  max-height: 100%;
}

.marginCss {
  margin-top: 20px;
}

/* @import "@/assets/less/index.less"; */
</style>
